<template>
  <div class="demo">
    <div class="demo-title">自定义图标</div>
    <div class="demo-content">
      <Tree v-model:selectedKeys="selectedKeys" :tree-data="treeData" show-icon default-expand-all>
        <template #switcherIcon="{ switcherCls }"><DownOutlined :class="switcherCls" /></template>
        <template #icon="{ key, selected }">
          <template v-if="key === '0-0'">
            <SmileOutlined />
          </template>
          <template v-else-if="key === '0-0-0'">
            <SmileOutlined />
          </template>
          <template v-else>
            <FrownFilled v-if="selected" />
            <FrownOutlined v-else />
          </template>
        </template>
      </Tree>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { DownOutlined, SmileOutlined, FrownOutlined, FrownFilled } from '@ant-design/icons-vue';
  import Tree from '@sscd/tree';
  import type { TreeProps } from '@sscd/tree';
  const treeData: TreeProps['treeData'] = [
    {
      title: 'parent 1',
      key: '0-0',
      children: [
        { title: 'leaf', key: '0-0-0' },
        { title: 'leaf', key: '0-0-1' },
      ],
    },
  ];
  const selectedKeys = ref(['0-0-0']);
</script>
